<template>
  <div>
    <el-form
      :model="ruleForm"
      ref="ruleForm"
      :rules="rules"
      size="small"
      :disabled="disabled"
      :inline="true"
    >
      <el-card class="box">
        <div class="box">
          <el-form-item
            label="选择项目"
            prop="projectId"
          >
            <el-input
              readonly
              v-model="projectInfo.projectCode"
              placeholder="请选择项目"
              @click.native="handleProject"
              suffix-icon="el-icon-edit"
              style="width: 200px;"
            ></el-input>
          </el-form-item>
        </div>
        <el-descriptions
          :column="3"
          border
          v-if="projectInfo.id"
        >
          <el-descriptions-item label="项目编号">{{ projectInfo.projectCode }}
            <el-button
              size="mini"
              type="text"
              :disabled="false"
              style="margin-left: 10px;"
              @click="handleProjectInfo(projectInfo)"
            >查看项目信息</el-button>
          </el-descriptions-item>
          <el-descriptions-item label="客户名称">{{ projectInfo.customerNickName }}</el-descriptions-item>
          <el-descriptions-item label="代理商名称">{{ projectInfo.projectBasicVo.submitAgentNickName }}</el-descriptions-item>
          <el-descriptions-item label="立项通过时间">{{ projectInfo.createTime }}</el-descriptions-item>
          <el-descriptions-item label="融资金额">{{ formatReceiveAmount(projectInfo.rentTotalVo.leasePrincipal) }}</el-descriptions-item>
          <el-descriptions-item label="设备厂商">{{ projectInfo.projectBasicVo.relatedFactoryName }}</el-descriptions-item>
          <template v-if="false">
            <el-descriptions-item label="租赁物厂商"></el-descriptions-item>
            <el-descriptions-item label="租赁物合同金额"></el-descriptions-item>
            <el-descriptions-item label="期数"></el-descriptions-item>
            <el-descriptions-item label="立项详情">
              <el-button
                type="text"
                size="mini"
                icon="el-icon-view"
                @click="handleView"
              >查看</el-button>
            </el-descriptions-item>
          </template>
        </el-descriptions>
      </el-card>

      <el-card class="box">
        <div class="title">
          融资租赁合同
        </div>
        <div>
          <el-form-item
            label="主要租赁物"
            prop="leaseType"
          >
            <el-select
              v-model="ruleForm.leaseType"
              placeholder="请选择主要租赁物"
            >
              <el-option
                label="高机"
                value="ZL"
              ></el-option>
              <el-option
                label="随车"
                value="SC"
              ></el-option>
              <el-option
                label="工程机械"
                value="GCJX"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div>
          <el-form-item
            prop="contractTemplateFileInfoList"
            label-width="0px"
          >
            <el-button
              type="primary"
              size="mini"
              @click="handleContract"
            >选择合同模板</el-button>
          </el-form-item>
        </div>

        <div
          v-for="(item, index) in ruleForm.contractTemplateFileInfoList"
          :key="index"
        >
          <div class="title">
            {{ item.contractName }}
          </div>
          <div
            class="title"
            style="flex: 1; display: flex; align-items: center; justify-content: space-between;"
          >
            <div style="display: flex; margin: 0 10px;">
              <el-form-item
                label="合同编号"
                style="margin-bottom: 0;"
                :prop="'contractTemplateFileInfoList.' + index + '.contractCode'"
                :rules="{ required: true, message: '请输入合同编号', trigger: 'blur' }"
              >
                <el-input
                  v-model="item.contractCode"
                  placeholder="请输入合同编号"
                  clearable
                  style="width: 280px;"
                />
              </el-form-item>
              <div
                style="color: #3095E2;font-size: 24px; display: flex; align-items: center; cursor: pointer;"
                v-if="!disabled"
              >
                <i
                  class="el-icon-refresh"
                  @click="handleRandom(item, index)"
                ></i>
              </div>
            </div>
            <div style="width: 200px; display: flex; align-items: center; justify-content: end;">
              <el-button
                type="text"
                size="mini"
                icon="el-icon-view"
                :disabled="false"
                @click="previewFile(item, index)"
              >预览</el-button>
              <el-button
                type="text"
                size="mini"
                icon="el-icon-download"
                :disabled="false"
                @click="downloadFile(item, index)"
              >下载</el-button>
              <el-button
                type="text"
                size="mini"
                v-if="!disabled && !item.flag"
                @click="handleContractTemplate(item, index)"
              >制定</el-button>
              <el-button
                v-if="!disabled"
                type="text"
                size="mini"
                style="color: red;"
                @click="handleContractDel(index, index)"
              >删除</el-button>
            </div>
          </div>
          <div
            v-for="(v, i) in item.signerInfo"
            :key="i"
          >
            <div class="title">{{ v.componentName }}</div>
            <el-row :gutter="10">
              <el-col :span="8">
                <!--  -->
                <el-form-item
                  label="姓名"
                  :prop="'contractTemplateFileInfoList.' + index + '.signerInfo.' + i + '.signUserName'"
                  :rules="{ required: true, message: '请输入姓名', trigger: 'blur' }"
                >
                  <el-input
                    v-model="v.signUserName"
                    maxlength="20"
                    placeholder="请输入姓名"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="手机号"
                  :prop="'contractTemplateFileInfoList.' + index + '.signerInfo.' + i + '.phonenumber'"
                  :rules="{ required: true, validator: validatePhoneNumber, trigger: 'blur' }"
                >
                  <el-input
                    v-model="v.phonenumber"
                    maxlength="11"
                    placeholder="请输入手机号"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="类型">
                  <el-radio-group v-model="v.signatoryType">
                    <el-radio :label="0">个人</el-radio>
                    <el-radio :label="1">公司</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div style="margin: 10px 0; background-color: #DEDEDE; height: 1px; width: 100%;"></div>
        </div>
      </el-card>

      <el-card class="box">
        <div class="title">
          其他合同
        </div>
        <el-table
          :data="ruleForm.attachFileList"
          style="width: 100%; margin-bottom: 20px"
          border
        >
          <el-table-column
            label="序号"
            width="80"
          >
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column
            label="附件名称"
            prop="contractName"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.contractName"
                placeholder="请输入附件名称"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="附件说明"
            prop="remark"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.remark"
                placeholder="请输入附件说明"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="附件编号"
            prop="contractCode"
          >
            <template slot="header">
              <div class="table-label">
                附件编号
              </div>
            </template>
            <template slot-scope="scope">
              <div style="display: flex; margin: 0 10px;">
                <el-form-item
                  label-width="0"
                  style="margin-bottom: 0;"
                  :prop="'attachFileList.' + scope.$index + '.contractCode'"
                  :rules="{ required: true, message: '请输入附件编号', trigger: 'blur' }"
                >
                  <el-input
                    v-model="scope.row.contractCode"
                    placeholder="请输入附件编号"
                    clearable
                  />
                </el-form-item>
                <div style="color: #3095E2;font-size: 24px; display: flex; align-items: center; cursor: pointer;">
                  <i
                    v-if="!disabled"
                    class="el-icon-refresh"
                    @click="handleRandomFile(scope.row, scope.$index)"
                  ></i>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="附件上传"
            prop="fileDesc"
          >
            <template slot-scope="scope">
              <el-upload
                class="upload-demo"
                :ref="'uploadFile' + scope.$index"
                :accept="fileAccept"
                :action="uploadFileUrl + '/file/saveFile'"
                :before-upload="beforeUpload"
                :on-change="(file, fileList) => handleChange(file, fileList, scope.row)"
                :on-success="(response, file, fileList) => handleSuccess(response, file, fileList, scope.row, scope.$index, 'uploadFile' + scope.$index)"
                :on-remove="(file, fileList) => handleRemove(file, fileList, scope.row)"
                :file-list="scope.row.fileList"
                :data="{fileRemark: scope.row.remark, fileuserInfo: scope.row.contractName}"
                :multiple="false"
                :auto-upload="true"
              >
                <el-button
                  type="text"
                  style="font-size: 16px;"
                  icon="el-icon-upload2"
                ></el-button>
              </el-upload>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="150px"
          >
            <template
              slot="header"
              slot-scope="scope"
            >
              操作
              <el-button
                size="mini"
                type="primary"
                v-if="!disabled"
                style="margin-left: 10px;"
                @click="addFileList()"
              >+新增</el-button>
            </template>
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                v-if="!disabled"
                style="color: red;"
                @click="deleteFileList(scope.$index)"
              >删除</el-button>
              <el-button
                size="mini"
                type="text"
                :disabled="!disabled"
                v-if="disabled"
                @click="handleDownloadFile(scope.row)"
              >下载</el-button>
              <el-button
                size="mini"
                type="text"
                :disabled="!disabled"
                v-if="disabled"
                @click="handlePreviewFile(scope.row)"
              >预览</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <el-card v-if="!disabled">
        <div>
          <el-form-item
            label="下一节点审批人"
            prop="targetUserName"
            label-width="120px"
          >
            <el-radio-group v-model="ruleForm.targetUserName">
              <el-radio
                :label="item.userName"
                v-for="item in approveList"
                :key="item.userName"
              >{{ item.nickName }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div>
          <el-button
            type="info"
            size="mini"
            @click="handleSubmit('0')"
          >保存草稿</el-button>
          <el-button
            type="primary"
            size="mini"
            @click="handleSubmit('1')"
          >确认提交</el-button>
        </div>
      </el-card>
    </el-form>

    <ProjectTable
      ref="projectRef"
      @ok="handleProjectOk"
    ></ProjectTable>

    <ContractTable
      :contractID="contractID"
      ref="contractRef"
      @ok="handleContractOk"
    ></ContractTable>

    <PreviewFile
      :fileType="fileType"
      :fileUrl="fileUrl"
      :dialogVisible="dialogFileVisible"
      @cancel="dialogFileVisible = false"
    />

    <FormApprovalDialog ref="formApprovalDialogRef"></FormApprovalDialog>
  </div>
</template>

<script>
import { getNodeUsers, queryFiles, getSimpleFileInfo, creatContractCode, contractTemplateCreate, creatContractId, projectApplyInfo, projectApplyList, addAttachFile } from '@/api/processManage/approveForms'
import ProjectTable from './ProjectTable.vue';
import ContractTable from './ContractTable.vue';
import { downloadFile, previewFile, formatMoney } from '@/utils/utils';
import PreviewFile from '@/components/PreviewFile/index'
import FormApprovalDialog from './FormApprovalDialog'
export default {
  dicts: ['enabled_file_upload_types'],
  props: ['templateId', 'doc', 'flowNo', 'disabled', 'templateType'],
  components: { ProjectTable, ContractTable, PreviewFile, FormApprovalDialog },
  data() {
    return {
      uploadFileUrl: process.env.VUE_APP_BASE_API,
      ruleForm: {
        flag: '0',
        targetUserName: '',
        leaseType: '',
        contractId: '',
        projectId: null,
        projectCode: '',
        contractTemplateFileInfoList: [],
        attachFileList: []
      },
      rules: {
        projectId: [{ required: true, message: '请选择项目', trigger: 'change' }],
        leaseType: [{ required: true, message: '请选择主要租赁物', trigger: 'change' }],
        contractTemplateFileInfoList: [{ required: true, message: '请选择合同模板', trigger: 'change' }],
        targetUserName: [{ required: true, message: '请选择下一节点审批人', trigger: 'blur' }],
      },
      approveList: [],
      previewUrl: '',
      projectInfo: {
        customerAdmitVo: {},
        projectBasicVo: {
          id: '',
        },
        rentCalculateVo: {}
      },
      contractID: [],

      downloadUrl: '',
      numPages: undefined,

      fileAccept: '',

      fileUrl: '',
      fileType: '',
      dialogFileVisible: false,
      dialogProjectVisible: false,
    }
  },
  created() {
    this.$nextTick(() => {
      this.$refs['ruleForm'].resetFields();
    })
    this.handleGetNodeUsers()
    if (['发起'].includes(this.templateType)) {
      creatContractId().then(res => {
        this.ruleForm.contractId = res.data
      })
    }
  },

  watch: {
    doc: {
      async handler(val) {
        console.log(val);

        if (JSON.stringify(val) != '{}') {
          let params = JSON.parse(JSON.stringify(val))
          this.ruleForm = {
            ...params,
            contractTemplateFileInfoList: params.contractTemplateFileInfoList.map((item) => {
              return {
                ...item,
                flag: true
              }
            }),

          }
          /* attachFileList: val.attachFileList.map(item => ({
          // ...item,
          //   fileList: v.contractName ? [{ name: v.contractName }] : [],
           })) */

          const res = await projectApplyList({
            projectCode: this.ruleForm.projectCode
          });
          const fileItem = res.rows[0]
          const ret = await projectApplyInfo({
            id: this.ruleForm.projectId,
          });
          this.projectInfo = {
            ...fileItem,
            ...ret.data
          }

        }
      },
      deep: true
    },
    'dict.type.enabled_file_upload_types': {
      deep: true,
      handler(newValue) {
        if (newValue && newValue.length > 0) {
          this.fileAccept = newValue.map(item => {
            let updatedValue = item.value.split(',').map(item => `.${item}`).join(',');
            return updatedValue;
          }).join(',');
        }
      },
      immediate: true,
    }
  },
  methods: {
    validatePhoneNumber(rule, value, callback) {
      const phoneRegex = /^1[2-9]\d{9}$/;
      if (!value) {
        callback(new Error('请输入手机号'));
      } else if (!phoneRegex.test(value)) {
        callback(new Error('手机号格式不正确'));
      } else {
        callback();
      }
    },
    handleProjectInfo(row) {
      // this.dialogProjectVisible = true
      this.$refs.formApprovalDialogRef.open(row)
    },
    handleProjectClose() {
      this.dialogProjectVisible = false
    },
    formatReceiveAmount(amount) {
      return formatMoney(amount);
    },
    addFileList() {
      this.ruleForm.attachFileList.push({
        contractId: this.ruleForm.contractId,
        contractCode: '',
        contractName: '',
        fileId: '',
        fileList: [],
        remark: ''
      })
    },
    // 删除附件列表
    deleteFileList(i) {
      this.ruleForm.attachFileList.splice(i, 1);
    },
    handleRandomFile(row, index) {
      this.$refs['ruleForm'].validateField('leaseType', (errorMessage) => {
        if (!errorMessage) {
          creatContractCode({
            leaseType: this.ruleForm.leaseType
          }).then(res => {
            row.contractCode = res.data.join('')
            const formRef = this.$refs.ruleForm;
            formRef.clearValidate(['attachFileList.' + index + '.contractCode']);
          })
        }
      })
    },
    beforeUpload(file) {
      if (file.size / 1024 / 1024 > 50) {
        this.$message.error('文件不能超过50M！');
        return false;
      }
      return true;
    },
    handleChange(file, fileList, v) {
      if (fileList.length > 0) {
        v.fileList = [fileList[fileList.length - 1]];
      } else {
        v.fileList = [];
      }
      return true
    },
    handleSuccess(response, file, fileList, v, i, uploadName) {
      let uid = file.uid
      let idx = this.$refs[uploadName].uploadFiles.findIndex(item => item.uid == uid)
      if (response.code != 200) {
        this.$modal.msgError('文件格式或命名存在特殊字符,请检查后重新上传!');
        this.$refs[uploadName].uploadFiles.splice(idx, 1)
        return true;
      }

      const { fileName: originalFileName, fileUuid } = response.data;
      v.contractName = originalFileName.split('.').shift();
      v.fileId = fileUuid;
      v.fileList.push(file);
    },
    handleRemove(file, fileList, v) {
      v.fileList = fileList
      if (!v.fileList.length) {
        v.fileId = ''
        v.contractName = ''
      }
    },
    // 文件下载
    async handleDownloadFile(row) {
      downloadFile({ fileUuid: row.fileId });
    },
    // 文件预览
    async handlePreviewFile(row) {
      try {
        const { arrayBuffer, fileType } = await previewFile({ fileUuid: row.fileId });
        this.fileUrl = arrayBuffer;
        this.fileType = fileType;
        this.dialogFileVisible = true
      } catch (error) {
        this.$modal.msgError(error.message);
      }
    },
    // 抽取公共方法，用于创建合同模板
    async createContractTemplate(row) {
      // 返回一个 Promise 对象
      return new Promise(async (resolve, reject) => {
        // this.$refs['ruleForm'].validate(async (valid) => {
        //   if (valid) {

        //   } else {
        //     reject(new Error("验证失败"));
        //   }
        // });
        const res = await contractTemplateCreate({
          projectId: this.ruleForm.projectId,
          contractTemplateFileInfoList: [row],
          contractId: this.ruleForm.contractId,

          customerName: this.projectInfo.customerNickName,
          agentName: this.projectInfo.projectBasicVo.submitAgentNickName,
          contractSum: this.projectInfo.contractAmount,
          approvalfileId: this.projectInfo.fileVo.PROJECT_APPROVAL && this.projectInfo.fileVo.PROJECT_APPROVAL.map(item => item.fileId).join(',')
        });
        if (res.code == 200 && res.data) {
          this.$message.success("制定成功");
          row.flag = true;
          resolve(res.data.fileInfoDtoList);
        } else {
          this.$message.error("制定失败");
          reject(new Error("制定失败"));
        }
      });
    },
    // 抽取公共方法，用于获取文件信息并下载或预览
    async getFileInfoAndProcess(row, processFn) {
      await this.createContractTemplate(row);

      const res = await getSimpleFileInfo({
        uuidList: [{ fileUuid: row.fileUuid }]
      });

      const item = res.data[0];

      const ret = await queryFiles({
        fileId: item.fileUuid,
        modelKey: 'original'
      });

      // 处理文件，预览或下载
      processFn(ret, item);
    },

    // 合同制定
    async handleContractTemplate(row, index) {
      const formRef = this.$refs.ruleForm;
      const fieldsToValidate = [
        `contractTemplateFileInfoList.${index}.contractCode`,
        ...row.signerInfo.map((signer, signerIndex) => [
          `contractTemplateFileInfoList.${index}.signerInfo.${signerIndex}.signUserName`,
          `contractTemplateFileInfoList.${index}.signerInfo.${signerIndex}.phonenumber`,
        ])
      ].flat();
      try {
        await this.validateFields(fieldsToValidate, formRef);
        this.createContractTemplate(row);
      } catch (error) {
        this.$modal.msgError(error.message);
      }
    },
    async validateFields(fields, formRef) {
      const validationPromises = fields.map(field => {
        return new Promise((resolve, reject) => {
          formRef.validateField(field, (errorMessage) => {
            if (!errorMessage) {
              resolve();
            }
          });
        });
      });

      try {
        await Promise.all(validationPromises);
      } catch (error) {
        throw error;
      }
    },
    // 预览
    async previewFile(row, index) {
      const formRef = this.$refs.ruleForm;
      const fieldsToValidate = [
        `contractTemplateFileInfoList.${index}.contractCode`,
        ...row.signerInfo.map((signer, signerIndex) => [
          `contractTemplateFileInfoList.${index}.signerInfo.${signerIndex}.signUserName`,
          `contractTemplateFileInfoList.${index}.signerInfo.${signerIndex}.phonenumber`,
        ])
      ].flat();

      try {
        await this.validateFields(fieldsToValidate, formRef);
        const fileInfoDtoList = await this.createContractTemplate(row);
        if (fileInfoDtoList && fileInfoDtoList.length > 0) {
          const item = fileInfoDtoList[0];

          const { arrayBuffer, fileType } = await previewFile({ fileUuid: item.fileUuid });
          this.fileUrl = arrayBuffer;
          this.fileType = fileType;
          this.dialogFileVisible = true;
        }
      } catch (error) {
        this.$modal.msgError(error.message);
      }
    },

    async downloadFile(row, index) {
      const formRef = this.$refs.ruleForm;
      const fieldsToValidate = [
        `contractTemplateFileInfoList.${index}.contractCode`,
        ...row.signerInfo.map((signer, signerIndex) => [
          `contractTemplateFileInfoList.${index}.signerInfo.${signerIndex}.signUserName`,
          `contractTemplateFileInfoList.${index}.signerInfo.${signerIndex}.phonenumber`,
        ])
      ].flat();
      try {
        await this.validateFields(fieldsToValidate, formRef);
        const fileInfoDtoList = await this.createContractTemplate(row);
        if (fileInfoDtoList && fileInfoDtoList.length > 0) {
          const item = fileInfoDtoList[0];
          downloadFile({ fileUuid: item.fileUuid });
        } else { }
      } catch (error) { }
    },
    handleProject() {
      if (!this.disabled) {
        this.$refs.projectRef.sync()
      }
    },
    handleProjectOk(row) {
      this.projectInfo = row
      this.ruleForm.projectId = row.id
      this.ruleForm.projectCode = row.projectCode
      this.ruleForm.contractTemplateFileInfoList.map(item => {
        item.flag = false
        return item
      })
      this.$refs.ruleForm.clearValidate(['projectId']);
    },
    handleContract() {
      this.$refs['ruleForm'].validateField('projectId', (errorMessage) => {
        if (!errorMessage) {
          this.$refs.contractRef.sync()
          this.contractID = this.ruleForm.contractTemplateFileInfoList.map(item => item.templateId)
        }
      });
    },
    handleContractOk(row) {
      let signDetail = JSON.parse(row.signDetail)
      this.ruleForm.contractTemplateFileInfoList.push({
        fileUuid: row.templateUuid,
        templateId: row.templateId,
        contractCode: '',
        contractName: row.templateName,
        flag: false,
        signerInfo: signDetail.map((item, index) => {
          return {
            componentName: item.componentName,
            signatoryId: new Date().getTime() + index,
            signUserName: "",
            phonenumber: "",
            signatoryType: 0, // 1 公司 0 个人
          }
        })
      })
    },
    handleContractDel(index) {
      this.ruleForm.contractTemplateFileInfoList.splice(index, 1);
    },
    handleView() { },
    handleGetNodeUsers() {
      getNodeUsers({
        templateId: this.templateId,
        flowNo: '',
        targetAction: 'TO_NEXT',
        targetNodeId: ''
      }).then(res => {
        this.approveList = res.data
        this.ruleForm.targetUserName = res.data.length ? res.data[0].userName : ''
      })
    },

    handleRandom(item, index) {
      this.$refs['ruleForm'].validateField('leaseType', (errorMessage) => {
        if (!errorMessage) {
          creatContractCode({
            leaseType: this.ruleForm.leaseType,
            codeList: item.contractCode.length ? [item.contractCode] : []
          }).then(res => {
            item.contractCode = res.data.join('')
            const formRef = this.$refs.ruleForm;
            formRef.clearValidate(['contractTemplateFileInfoList.' + index + '.contractCode']);
          })
        }
      });
    },

    handleSubmit(flag) {
      this.ruleForm.flag = flag

      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          if (!this.ruleForm.contractTemplateFileInfoList.every((item) => item.flag == true)) {
            this.$message.error("请制定合同")
            return
          }

          let codeList = this.ruleForm.contractTemplateFileInfoList.map(item => item.contractCode)
          const attachFileList = this.ruleForm.attachFileList.filter(item => item.fileId.length)
          if (attachFileList.length) {
            addAttachFile(attachFileList.filter(item => item.fileId))
          }

          creatContractCode({
            leaseType: this.ruleForm.leaseType,
            codeList: codeList
          }).then(res => {
            this.$emit('submit', {
              ...this.ruleForm,
              attachFileList,
              flag,
              flowNo: this.flowNo || ''
            });
          })
        } else {
          return false
        }
      })
    }
  },
  beforeDestroy() {
    if (this.previewUrl) {
      URL.revokeObjectURL(this.previewUrl);
    }
  }
}
</script>
<style lang="scss" scoped>
.table-label:before {
  content: "*";
  color: #ff4949;
  margin-right: 4px;
}
.box {
  margin-bottom: 20px;
  :deep(.el-descriptions-item__label) {
    width: 120px;
  }
  .title {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: bold;
  }
  .box-card {
    margin-bottom: 20px;
  }
  .upload-demo {
    display: flex;
    align-items: center;
    :deep(.el-upload-list) {
      width: 90%;
      .el-upload-list__item {
        margin-top: 0 !important;
      }
    }
  }
}
</style>